<template>
  <div class="app-container">
    <ViewSessions
      v-if="loginStatu != 10"
      :disabled-newly="disabledNewly"
      class="sousuo"
      style="margin-bottom: 15px"
      @selected="selected"
      @add="add"
      @storage-out="storageOutAction"
    />
    <div style="margin-left: 20px;margin-left: 20px;">
      <!-- <span>订单编号：10</span> -->
      <span style="margin-right: 20px;">产品编号：{{ productCode }}</span>
      <span>请购单号：{{ code }}</span>
    </div>
    <el-table
      :row-class-name="tableRowClassName"
      :data="personnelList"
      :header-row-style="{
        'background-color': '#E6E6E6',
        'font-weight': 'bold',
        color: '#333',
      }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      height="650"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
    >
      <el-table-column show-overflow-tooltip align="center" prop="id" label="编号"/>
      <el-table-column show-overflow-tooltip align="center" prop="name" label="名称"/>
      <el-table-column show-overflow-tooltip align="center" prop="amount" label="数量"/>
      <el-table-column show-overflow-tooltip align="center" prop="cost" label="价格"/>
      <el-table-column show-overflow-tooltip align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 0 ? '未确认' : (scope.row.status == 1 ? '已到货' : (scope.row.status == 2 ? '已入库' : '')) }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="deleteRemark" label="备注"/>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.deleteFlag == 1"
            type="text"
            size="mini"
            @click="() => seeDeleteItem(scope.row)"
          >查看
          </el-button>
          <el-button
            v-if="scope.row.deleteFlag != 1 && ((scope.row.status == 0 && loginStatu == 11) || (scope.row.status == 1 && loginStatu == 10))"
            type="text"
            size="mini"
            @click="() => show(scope.row)"
          >确定
          </el-button>
          <el-button
            v-if="scope.row.deleteFlag != 1 && loginStatu != 10"
            type="text"
            size="mini"
            @click="() => upload(scope.row)"
          >修改
          </el-button>
          <el-button
            v-if="scope.row.deleteFlag != 1 && loginStatu != 10"
            type="text"
            size="mini"
            @click="() => delect(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: end"
      layout="total, prev, pager, next,jumper"
      @current-change="fetchData"
    />
    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="dialogFormValue"
      @close="closeDialog"
    >
      <el-form
        ref="personnel"
        :model="personnel"
        :rules="validateRules"
        label-width="120px"
      >
        <el-form-item label="订单编号：">
          <el-col :span="8">
            <el-select :disabled="readonlyInput" v-model="personnel.orderCode" clearable placeholder="请选择订单">
              <el-option
                v-for="item in orderNoList"
                :key="item.insideCode"
                :label="item.insideCode"
                :value="item.insideCode"/>
            </el-select>
            <!-- <el-input
              :disabled="readonlyInput"
              v-model="personnel.orderCode"
              size="small"
              placeholder="请输入订单编号"
            /> -->
          </el-col>
        </el-form-item>
        <el-form-item label="名称：">
          <el-col :span="8">
            <el-input
              :disabled="readonlyInput"
              v-model="personnel.name"
              size="small"
              placeholder="请输入名称"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="数量：">
          <el-col :span="8">
            <el-input
              :disabled="readonlyInput"
              v-model="personnel.number"
              size="small"
              placeholder="请输入数量"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="请购货物：">
          <el-col :span="8">
            <el-input
              :rows="2"
              :disabled="readonlyInput"
              v-model="personnel.content"
              type="textarea"
              size="small"
              placeholder="请输入请购货物"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="价格：">
          <el-col :span="8">
            <el-input
              :disabled="readonlyInput"
              v-model="personnel.cost"
              size="small"
              placeholder="请输入价格"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="restData()">取 消</el-button>
        <el-button type="primary" @click="append('personnel')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogDelect"
    >
      <el-input
        :rows="2"
        v-model="textDelect"
        type="textarea"
        placeholder="请输入删除理由"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delectClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ViewSessions from './ViewSessions.vue'
import user from '../../api/acl/user.js'
export default {
  components: {
    ViewSessions
  },
  data() {
    return {
      loginStatu: window.sessionStorage.getItem('department'),
      orderNoList: [],
      disabledNewly: false,
      readonlyInput: false,
      dialogDelect: false,
      textDelect: '',
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 10, // 每页记录数
      validateRules: {
        name: [{ required: true, trigger: 'change', message: '请输入名称' }],
        number: [{ required: true, trigger: 'change', message: '请输入数量' }]
      },
      personnelList: [],
      dialogFormVisible: false,
      dialogFormValue: '',
      code: '',
      productCode: '',
      productId: '',
      personnel: {
        orderCode: '',
        number: '',
        id: '',
        name: '',
        content: '',
        cost: ''
      },
      searchInfo: {
        name: ''
      }
    }
  },
  // 监听上面文本框搜索
  watch: {},

  created() {
    if (this.$route.query) {
      if (this.$route.query.code) {
        this.code = this.$route.query.code
      }
      if (this.$route.query.productCode) {
        this.productCode = this.$route.query.productCode
      }
      if (this.$route.query.id) {
        this.productId = this.$route.query.id
      }
      if (this.$route.query.code && this.$route.query.productCode) {
        this.disabledNewly = false
      } else {
        this.disabledNewly = true
      }
    }
  },
  mounted() {
    this.listProductPurchase()
    this.listAllOrder()
  },
  methods: {
    listAllOrder() {
      user
        .listAllOrder()
        .then((response) => {
          this.orderNoList = response
        })
    },
    show(row) {
      if (row.status == 0) {
        this.$confirm('你确定是否到货？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          user.updateProductPurchase({
            id: row.id,
            status: 1
          }).then((response) => {
            this.$message({
              message: '确定成功',
              duration: 1000
            })
            this.listProductPurchase()
          })
        }).catch(() => {
        })
      } else if (row.status == 1) {
        this.$confirm('你确定入库？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          user.updateProductPurchase({
            id: row.id,
            status: 2
          }).then((response) => {
            this.$message({
              message: '确定成功',
              duration: 1000
            })
            this.listProductPurchase()
          })
        }).catch(() => {
        })
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.deleteFlag == 1) {
        return 'warning-row'
      }
      return ''
    },
    delectClick() {
      if (this.textDelect == '') {
        this.$message({
          message: '请输入删除理由',
          duration: 1000
        })
        return
      }
      user.deleteProductPurchase({
        deleteFlag: 1,
        id: this.delectId,
        deleteRemark: this.textDelect
      }).then((response) => {
        this.delectId = ''
        this.textDelect = ''
        this.dialogDelect = false
        this.$message({
          message: '删除成功',
          duration: 1000
        })
        this.listProductPurchase()
      })
    },
    delect(val) {
      this.delectId = val.id
      this.textDelect = ''
      this.dialogDelect = true
    },
    fetchData(val) {
      this.page = val
      this.listProductPurchase()
    },
    listProductPurchase() {
      user
        .listProductPurchase({
          limit: this.limit,
          page: this.page,
          name: this.searchInfo.name,
          code: this.code ? this.code : null,
          productCode: this.productCode ? this.productCode : null
        })
        .then((response) => {
          this.total = response.total
          this.personnelList = response.list
        })
    },
    closeDialog() {
      this.personnel = {
        orderCode: '',
        number: '',
        id: '',
        name: '',
        content: '',
        cost: ''
      }
      this.$refs.personnel.resetFields()
    },
    append(val) {
      this.$refs[val].validate((valid) => {
        if (valid) {
          if (this.personnel.id == '') {
            // 新增
            user
              .insertProductPurchase({
                status: 0,
                orderCode: this.personnel.orderCode,
                content: this.personnel.content,
                cost: this.personnel.cost,
                amount: this.personnel.number,
                name: this.personnel.name,
                code: this.code,
                productCode: this.productCode,
                productId: this.productId
              })
              .then((response) => {
                this.$message({
                  message: '新增成功',
                  duration: 1000
                })
                this.dialogFormVisible = false
                this.listProductPurchase()
              })
          } else {
            user
              .updateProductPurchase({
                id: this.personnel.id,
                orderCode: this.personnel.orderCode,
                amount: this.personnel.number,
                name: this.personnel.name,
                code: this.code,
                content: this.personnel.content,
                cost: this.personnel.cost,
                productCode: this.productCode
              })
              .then((response) => {
                this.$message({
                  message: '修改成功',
                  duration: 1000
                })
                this.dialogFormVisible = false
                this.listProductPurchase()
              })
          }
        }
      })
    },
    restData() {
      this.dialogFormVisible = false
      this.dialogFormValue = ''
    },
    selected(val) {
      this.searchInfo = val
      this.page = 1
      this.listProductPurchase()
    },
    add() {
      this.dialogFormVisible = true
      this.readonlyInput = false
      this.dialogFormValue = '新增请购清单'
    },
    seeDeleteItem(val) {
      this.dialogFormVisible = true
      this.dialogFormValue = '查看请购清单'
      this.readonlyInput = true
      this.personnel = {
        orderCode: val.orderCode,
        content: val.content,
        cost: val.cost,
        number: val.amount,
        id: val.id,
        name: val.name
      }
    },
    upload(val) {
      this.dialogFormVisible = true
      this.readonlyInput = false
      this.dialogFormValue = '修改请购清单'
      this.personnel = {
        orderCode: val.orderCode,
        content: val.content,
        cost: val.cost,
        number: val.amount,
        id: val.id,
        name: val.name
      }
    }
  }
}
</script>
<style>
.el-table .warning-row {
    background:#ff02027a;
  }
</style>
